<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="utf-8">
    <title>会员管理系统-登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <noscript><link rel="stylesheet" href="/assets/css/noscript.css" /></noscript>
    <link th:href="@{/img/favicon.ico}" rel="shortcut icon" >
    <link th:href="@{/layui/css/layui.css}" type="text/css" rel="stylesheet" media="all"/>
    <link href="/assets/css/main.css" rel="stylesheet" />
    <link rel="stylesheet" href="/assets/css/ie9.css"/>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/js/title.js}" type="text/javascript"></script>
<!--    <script th:src="@{/js/sliderVerify/sliderVerify.js}" type="text/javascript"></script>-->
    <style>
        .alert{
            color: #000000;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <header id="header">
        <div class="logo">
            <span class="icon fa-university"></span>
        </div>
        <div class="content">
            <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
            <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
            <div class="inner">
                <div class="layui-container">
                    <div class="layui-row">
                        <div class="layui-col-xs4 layui-col-xs-offset4">
                            <h1>会员管理系统</h1>
                            <div th:if="${error != null}" style="text-align: center">
                                <span class="layui-btn layui-btn-sm layui-btn-danger"  th:text="${error}"></span><br><br>
                            </div>
                            <form class="layui-form layui-form-pane" th:action="@{/role}" method="post">
                                <div class="layui-form-item">
                                    <label style="height: 44px;line-height: 25px;" class="layui-form-label layui-bg-green">选择角色</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="role" value="1" title="管理员" >
                                        <input type="radio" name="role" value="2" title="商家" checked>
                                        <input type="radio" name="role" value="3" title="会员" >
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label style="height: 44px;line-height: 25px;" class="layui-form-label layui-bg-green">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="username" autocomplete="off" required="required" placeholder="请输入用户名" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label style="height: 44px;line-height: 25px;" class="layui-form-label layui-bg-green">密码</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="password" required="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label style="height: 44px;line-height: 25px;" class="layui-form-label layui-bg-green">滑动验证</label>
                                    <div class="layui-input-block">
                                        <div id="slider"></div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button style="height: 44px;line-height: 25px;" type="submit" lay-submit lay-filter="formDemo" class="layui-btn layui-btn-fluid">登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="/register/index">注册</a></li>
                <li><a href="javascript:;">联系客服</a></li>
                <li><a href="javascript:;">关于</a></li>
            </ul>
        </nav>
    </header>
    <footer id="footer">
        <p class="copyright">Copyright &copy; 2019. <a href="/">MMMS</a> All rights reserved.</p>
    </footer>
</div>
<div id="bg"></div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/skel.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?132af61e5d1e0bde3638f1ee143bfdb0";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script th:src="@{/js/sliderVerify/sliderValidation.js}" type="text/javascript"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var layer = layui.layer;
        layer.load();
        setTimeout(function(){
            layer.closeAll('loading');
        }, 2000);
    });
</script>
</body>
</html>
